<ul nz-menu
    nzTheme="dark"
    nzMode="inline"
    [nzInlineCollapsed]="isCollapsed">
  <li nz-menu-item
      [nzSelected]="currentListUuid === 'today'">
    <i nz-icon type="home"></i>
    <span>今日</span>
  </li>
  <li nz-menu-item
      [nzSelected]="currentListUuid === 'todo'">
    <i nz-icon type="calendar"></i>
    <span>代办</span>
  </li>
  <!-- 自定义的列表 -->
  <li nz-menu-item
      *ngFor="let item of lists"
      [nzSelected]="currentListUuid === item._id"
      (contextmenu)="contextMenu($event, contextTemplate, item._id)"
  >
    <i nz-icon type="bars"></i>
    <span class="nav-text">{{ item.title }}</span>
  </li>
</ul>
<!-- 上下文菜单模板 -->
<ng-template #contextTemplate>
  <ul nz-menu
      nzInDropDown
      nzSelectable
      (nzClick)="close()">
    <li nz-menu-item
        (click)="openRenameListModal()">
      <i nz-icon type="edit" class="anticon-right-margin"></i>
      <span>重命名</span>
    </li>
    <li nz-menu-divider></li>
    <li nz-menu-item class="danger"
        (click)="delete()">
      <i nz-icon type="delete" class="anticon-right-margin"></i>
      <span>删除</span>
    </li>
  </ul>
</ng-template>
<!-- Add list modal -->
<nz-modal [(nzVisible)]="addListModalVisible"
          nzTitle="添加新列表"
          [nzClosable]="true"
          nzWidth="420"
          nzOkText="添加"
          nzCancelText="取消"
          [nzMaskClosable]="true"
          [nzKeyboard]="true"
          (nzOnCancel)="closeAddListModal()"
          (nzOnOk)="add(listInput.value); listInput.value = ''">
  <form nz-form>
    <nz-form-item>
      <nz-form-control>
        <input nz-input
               #listInput
               name="listTitle"
               placeholder="列表名称"
               (keydown.enter)="$event.preventDefault();add(listInput.value); listInput.value = ''"
        >
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-modal>
<!-- ./Add list modal -->
<!-- Rename list modal -->
<nz-modal [(nzVisible)]="renameListModalVisible"
          nzTitle="重命名"
          [nzClosable]="true"
          nzWidth="420"
          nzOkText="重命名"
          nzCancelText="取消"
          [nzMaskClosable]="true"
          [nzKeyboard]="true"
          (nzOnCancel)="closeRenameListModal()"
          (nzOnOk)="rename(listRenameInput.value); listRenameInput.value = ''">
  <form nz-form>
    <nz-form-item>
      <nz-form-control>
        <input nz-input
               #listRenameInput
               name="renameListTitle"
               placeholder="列表名称"
               (keydown.enter)="$event.preventDefault();rename(listRenameInput.value); listRenameInput.value = ''"
        >
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-modal>
<!-- ./Rename list modal -->
